<?php 
$content = "
<div style='width:80%; margin: 0 auto; display:inline-block; background-color:white; padding:20px; border-radius:10px; max-height:80vh; overflow-y:scroll;'>
	<div> 
		<img src='assets/logo.png' style='box-shadow:2px 2px 5px rgba(0,0,0,0.5); max-width:50px; ' valign='middle'>
		<span style='display:inline-block; font-weight:light; color:black; font-size:30px; text-shadow:2px 2px 5px rgba(0,0,0,0.5);'>Notebubble</span>
	</div>
	
	<p>¡Bienvenido a Notebubble! Esta aplicación es una forma simple y rápida de almacenar y organizar tus notas. Aquí tienes una guía rápida para ayudarte a usar todas las funciones:</p>
	
	<h1>Ayuda y Referencia</h1>

<div style='text-align: justify !important; text-justify: inter-word; !important'>

	<div class='section'>
		<h2>Categorías</h2>
		<p>Las notas están agrupadas en categorías. Para crear una, haz clic en el ícono <b>+</b> en la barra lateral.<br>
		<p>Ahí puedes nombrar tu categoría y agregar una descripción. También puedes elegir un ícono de imagen y un color de fondo para la categoría (esto se puede cambiar más adelante).</p><p>Además, puedes establecer una contraseña para hacer la categoría privada (opcional).</p>
	</div>
	
	<div class='section'>
		<h2>Notas</h2>
		<p>Las notas se almacenan en \"burbujas\" (de ahí el nombre de la aplicación), que puedes crear en unos pocos pasos:<br><br>
		Crear una nota es tan rápido como hacer clic en la categoría donde deseas crearla, escribir en el espacio de la parte inferior y luego hacer clic en <b>Enviar</b>. También puedes presionar <b>Ctrl+Intro</b> en tu teclado para enviar la nota.
		<br><br>
		Crear notas es así de fácil, pero hay más opciones al crear burbujas:
		<br>
		
		<h3>Archivos Adjuntos</h3>
		Puedes adjuntar archivos e imágenes a tus notas. Solo haz clic en el ícono de adjunto en el formulario de la parte inferior y selecciona el archivo que deseas adjuntar. Alternativamente, también puedes pegarlos con Ctrl+V si ya están en tu portapapeles.<br>
		<br>
		<b>Nota sobre las imagenes adjuntas:</b><br>
		Para ahorrar espacio en la base de datos, por default las imagenes se comprimen a un formato mas ligero antes de ser adjuntadas en la base de datos. Si desea conservar el archivo original sin compresion, desactivela antes de subir la imagen, haciendo clic en el boton del engranaje <span style='font-weight:bold; font-family:icons; color:#2980B9;'>(  )</span> de el formulario de posteo, y desactivando la opcion de comprimir imagenes.
		
		<h3>Listas de Tareas</h3>
		<p>Una burbuja puede tener elementos de lista de tareas con casillas de verificación que puedes marcar y desmarcar para llevar un seguimiento de tus pendientes.
Para crear un elemento de lista de tareas, solo coloca los caracteres >> al comienzo de la línea que estás escribiendo, así:</p>
		<p>>> Oranges<br>
		>> Milk<br>
		>> Newspaper</p>
		<h3>Recordatorios</h3>
		<p>Puedes establecer un recordatorio para una nota, y la aplicación te notificará en la fecha y hora que configures.<br><br>
		Para configurar el recordatorio, haz clic en el ícono de engranaje en el formulario de la parte inferior y escribe la fecha y hora deseada. También puedes usar el ícono de calendario para seleccionar una fecha y hora.
		<br><br>La aplicación mostrará una notificacion emergente cuando llegue el momento del recordatorio.
		</p>	
		
		<h3>Formato básico de texto</h3>
		<p>Puedes dar formato al texto que escribas utilizando una sintaxis de marcado limitada. Los modos disponibles son:</p>
		<table style='display:inline-block;'>
		<tr><td>**texto**</td><td>=></td><td><b>Texto en negrita</b></td></tr>
		<tr><td>*texto*</td><td>=></td><td><i>Texto en cursiva</i></td></tr>
		<tr><td>__texto__</td><td>=></td><td><u>Texto con subrayado</u></td></tr>
		</table>
		<br><br>
		Más opciones estarán disponibles en futuras versiones de la aplicación.
	</div>

	<div class='section'>
		<h2>Opciones de Notas</h2>
		<p>Una vez que hayas enviado una nota, hay algunas cosas que puedes hacer con ella. Pasa el cursor sobre el ícono <span style='font-weight:bold; font-family:icons; color:#2980B9;'></span> de cada nota para mostrar los controles. Las opciones disponibles son:
		
		<h3>Eliminar</h3>
		Elimina la nota si ya no la necesitas.
		
		<h3>Editar</h3>
		Puedes cambiar el texto, los adjuntos y los recordatorios de la nota.
		
		<h3>Destacar</h3>
		Si la nota es importante, puedes hacer clic aquí para destacarla y localizarla más rápido.
		
		<h3>Fijar nota</h3>
		Si la categoría tiene muchas notas y necesitas acceder recurrentemente a una, puedes fijarla para mostrar una notificación de nota fijada en la parte superior de la categoría. Al hacer clic en esta notificación, irás directamente a la nota fijada.
	</div>

	<div class='section'>
		<h2>Opciones de Categorías</h2>
		Al igual que las notas, las categorías también tienen opciones a las que puedes acceder haciendo clic en el ícono de menú en la parte superior de la categoría. Las opciones disponibles son:
		
		<h3>Editar</h3>
		Puedes editar el nombre, descripción, imagen, fondo y contraseña de la categoría, si tiene una.
		
		<h3>Fijar</h3>
		Al igual que las notas, las categorías también se pueden fijar. Esto hará que se muestren en la parte superior de la lista de categorías para un acceso rápido.
		
		<h3>Eliminar</h3>
		Si ya no necesitas una categoría, puedes eliminarla. Esto también eliminará todas sus notas y adjuntos.
	</div>
	
	<div class='section'>
		<h2>Busqueda</h2>
		
		Si necesitas encontrar notas por su contenido, haz clic en el ícono de búsqueda del menú de categoría. Esto abrirá el formulario de búsqueda, donde puedes escribir el texto que deseas buscar. Al enviar la búsqueda, el sistema mostrará las notas que contienen el texto buscado.
	</div>

	<div class='section'>
		<h2>Configuración de la Aplicación</h2>
		
		Haciendo clic en el ícono de engranaje <span style='font-weight:bold; font-family:icons; color:#2980B9;'>(  )</span> en el menú de la barra lateral, accederás a la página de configuración. Las configuraciones disponibles son:
		
		<h3>Idioma y Zona Horaria</h3>
		Aquí puedes cambiar el idioma de la aplicación y tu zona horaria. Si la hora y fecha de la aplicación son incorrectas, elige la ciudad más cercana a ti. Después, haz clic en el botón para guardar los cambios.
		
		<h3>Gestión de la Base de Datos</h3>
		Normalmente no necesitas tocar estos ajustes, pero si deseas colocar la base de datos en otro lugar de tu computadora (por ejemplo, en una carpeta de almacenamiento en la nube), puedes configurarlo aquí. Nota, sin embargo, que cambiar esta configuración fijara la localizacion de la base de datos en el lugar especifico que configures. Si deseas mantener la base de datos portable, no cambies estos valores.
		
		<h3>Notas sobre la configuracion:</h3>
		Eliminar la carpeta \"notebubble\" restablece la aplicación, incluidas tus notas y configuraciones. Para mantener todo portátil, asegúrate de que la carpeta permanezca junto con el ejecutable de la aplicación.
	</div>
	</div>
</div>";

echo renderPage($content);